<template>
	<view>
		<view class="wrap">
			<view class="tatle">请如实填写机构真实信息</view>
			<view class="information">
				<view class="small_item bord_bot">
					<view style="flex: 1;">推荐码</view>
					<view class="text">{{ formData.parentUserId }}</view>
					<!-- <view><input type="text" placeholder="无" v-model="formData.parentUserId"></view> -->
				</view>
				<view class="small_item">
					<view><span>*</span>机构名称</view>
					<view><input type="text" placeholder="药房、医院、门诊名称" placeholder-style="color:#B0B2B1"
							v-model="formData.name"></view>
				</view>
				<view class="small_item">
					<view><span>*</span>机构地址</view>
					<view>
						<u-address-picker @change="addressChange" :level="3">
							<view v-if="!formData.provinceName" class="addressInfo_value" style="color: #B0B2B1;">
								请选择你的机构地址</view>
							<view v-if="formData.provinceName" class="addressInfo_value">
								{{ formData.provinceName == formData.cityName ? formData.cityName + formData.areaName :
										formData.provinceName + formData.cityName + formData.areaName
								}}
							</view>
						</u-address-picker>
						<u-address-picker @change="addressChange" :level="3">
							<image
								src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/agencies/settled_address.png" />
						</u-address-picker>
					</view>
				</view>
				<view class="small_item">
					<view><span>*</span>详细地址</view>
					<view><input type="text" placeholder="请输入详情街道及门牌号" placeholder-style="color:#B0B2B1"
							v-model="formData.address"></view>
				</view>
				<view class="small_item">
					<view><span>*</span>联系人</view>
					<view><input type="text" placeholder="请输入联系人" placeholder-style="color:#B0B2B1"
							v-model="formData.conName"></view>
				</view>
				<view class="small_item">
					<view><span>*</span>联系方式</view>
					<view><input type="text" placeholder="请输入联系电话" placeholder-style="color:#B0B2B1"
							style="width:300rpx" v-model="formData.conTel">
						<button v-if="!verifydate" hover-class="button-hover" @click="phoneValidate">
							获取验证码</button>
						<button v-else hover-class="button-hover" style="background: #ACB1C2;">
							{{ verifydate }}s后重新获取</button>
					</view>
				</view>
				<view class="small_item">
					<view><span v-if="verify_on_off != formData.conTel">*</span>验证码</view>
					<view><input type="number" placeholder="请输入验证码" placeholder-style="color:#B0B2B1"
							v-model="formData.regCode"></view>
				</view>
				<view class="small_item">
					<view><span>*</span>执照编码</view>
					<view><input type="text" placeholder="医疗机构许可证或营业执照编码" placeholder-style="color:#B0B2B1"
							style="width:440rpx" v-model="formData.licenseCode"></view>
				</view>
				<view class="imgs_item">
					<view>
						<view>
							<span>*</span>执照照片
						</view>
						<view>
							<u-upload-image v-if="applyShow" :file-list="formDataImg.licensePic" :limit="1"
								noImgUrl="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/agencies/img_choose.png"
								@on-success="uploadSuccess($event, 'licensePic')"
								@on-error="uploadError($event, 'licensePic')"
								@on-remove="uploadRemove($event, 'licensePic')" />
						</view>
					</view>
					<view>
						<view>
							<span>*</span>机构门头照
						</view>
						<view>
							<u-upload-image v-if="applyShow" :file-list="formDataImg.doorPic" :limit="1"
								noImgUrl="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/agencies/img_choose.png"
								@on-success="uploadSuccess($event, 'doorPic')"
								@on-error="uploadError($event, 'doorPic')"
								@on-remove="uploadRemove($event, 'doorPic')" />
						</view>
					</view>
				</view>
			</view>
			<view class="tatle" style="margin-bottom: 24rpx;">设置后台登录账号密码</view>
			<view class="information">
				<view class="small_item">
					<view><span>*</span>账号</view>
					<view><input type="text" placeholder="设置后台登录账号" placeholder-style="color:#B0B2B1"
							v-model="formData.loginNo"></view>
				</view>
				<view class="small_item">
					<view><span>*</span>密码</view>
					<view><input type="text" placeholder="设置后台登录密码" placeholder-style="color:#B0B2B1"
							v-model="formData.loginPwd"></view>
				</view>
			</view>
			<view style="display: flex;align-items: center;margin: 24rpx auto 0;justify-content: center;">
				<view class="checkbox_wrap" @click="handleCheck">
					<view class="checkbox_circle">
						<view v-if="hasRead"></view>
					</view>
				</view>
				<text class="agree-black">我已阅读并同意</text>
				<text class="agree-color" @click="ilgin_on()">《{{ protocol.title }}》</text>
			</view>
			<u-loginagreement ref="login_agr" :tatle="protocol.title" :content="protocol.content"></u-loginagreement>
		</view>
		<view class="submit">
			<button @click="submit">提交申请</button>
		</view>
	</view>

</template>

<script>
import uAddressPicker from '../u-address-picker/u-address-picker.vue';
export default {
	components: {
		uAddressPicker
	},
	onLoad() {
		// 获取缓存的机构父id
		this.formData.parentUserId = getApp().globalData.parentAgencyId || '';
	},
	onShow() {
		// this.getAgenciesState()
		this.getProtocol()
		this.getInfoAll()
	},
	data() {
		return {
			hasRead: false, //协议阅读
			applyShow: true,
			formDataImg: {
				licensePic: [],  //执照照片
				doorPic: [],  //门头照片
			},
			formData: {
				parentUserId: '',  //上级id - 推荐码
				name: '',  //机构名称
				provinceName: '',   //省名称
				provinceCode: '',   //省id
				cityName: '',  //市名称
				cityCode: '',  //市id
				areaName: '',  //区名称
				areaCode: '',  //区id
				address: '',  //详细地址
				conName: '',  //联系人
				conTel: '',  //联系方式
				regCode: '',  //验证码
				licenseCode: '',  //执照编码
				licensePic: '', //执照照片
				doorPic: '',  //门头照片
				loginNo: '',  //后台账号
				loginPwd: '',  //后台密码
			},
			verifydate: 0,  //验证码倒计时
			protocol: {},  //协议
			verify_on_off: '',  //验证码是否必填  此为初次手机号
			add_off: false,  //是否第一次填写

		}
	},

	methods: {
		ilgin_on() {
			this.$refs.login_agr.login_on()
		},
		// 获取协议
		getProtocol() {
			this.$api.getProtocol({ type: 'org' }).then(e => {
				const { code, result } = e
				if (code == 200) {
					this.protocol = result
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
			})
		},
		// 上传文件
		uploadSuccess(res, index) {
			if (res.code == 200) {
				this.formDataImg[index].push(res.result.url);
				this.formData[index] = res.result.url;
				this.applyShow = false;
				this.applyShow = true;
			} else {
				uni.showToast({
					title: '文件上传失败',
					icon: 'none'
				});
			}
		},
		uploadError(e, index) {
			uni.showToast({
				title: '文件上传失败',
				icon: 'none'
			});
		},
		uploadRemove(e, index) {
			this.formDataImg[index].splice(e, 1);
			this.formData[index] = '';
			this.applyShow = false;
			this.applyShow = true;
		},
		// 发送验证码
		phoneValidate() {
			// console.log(this.formData.conTel);
			if (this.formData.conTel) {
				this.$api.phoneValidate({
					data: {
						phone: this.formData.conTel,
						type: '1'
					}
				}).then(e => {
					this.verifydate = 30
					const setIid = setInterval(() => {
						if (this.verifydate <= 0) {
							clearInterval(setIid)
						} else {
							this.verifydate--;
						}
					}, 1000)
					if (e.code != 200) {
						uni.showToast({
							title: e.message,
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: '已发送',
							icon: 'none'
						});
					}
				})
			} else {
				uni.showToast({
					title: '手机号不能为空',
					icon: 'none'
				});
			}
		},
		// 选择地区
		addressChange(result) {
			this.formData.provinceName = result.data[0].name;
			this.formData.provinceCode = result.data[0].id;
			this.formData.cityName = result.data[1].name;
			this.formData.cityCode = result.data[1].id;
			this.formData.areaName = result.data[2].name;
			this.formData.areaCode = result.data[2].id;
		},
		// 提交
		submit() {
			let off_on = true
			Object.keys(this.formData).forEach(key => {
				if (this.formData[key] == '') {
					if (key != 'parentUserId' && key != 'regCode') {
						off_on = false
					}
				}
			});
			if (this.formData.conTel != this.verify_on_off) {   //更换手机号
				if (!this.formData.regCode) {
					off_on = false
				}
			}

			if (!this.hasRead) {
				off_on = false
				uni.showToast({
					title: '请阅读协议并同意',
					icon: 'none'
				});
			} else {
				if (off_on) {
					if (this.add_off) {
						this.$api.agenciesAdd({
							data: this.formData
						}).then(e => {
							if (e.code == 200) {
								uni.redirectTo({
									url: '/pages-agencies/auditDuring/auditDuring'
								})
							} else {
								uni.showToast({
									title: e.message,
									icon: 'none'
								});
							}
						})
					} else {
						this.$api.getEdit(this.formData)
							.then(e => {
								if (e.code == 200) {
									uni.redirectTo({
										url: '/pages-agencies/auditDuring/auditDuring'
									})
								} else {
									uni.showToast({
										title: e.message,
										icon: 'none'
									});
								}
							})

					}
				} else {
					uni.showToast({
						title: '必填项不能为空',
						icon: 'none'
					});
				}
			}
		},
		// 获取机构信息
		getInfoAll() {
			this.$api.getInfoAll().then(e => {
				const { code, result } = e
				if (code == 200) {
					this.formData.name = result.name  //机构名
					this.formData.provinceName = result.provinceName  //省
					this.formData.provinceCode = result.provinceCode  //省
					this.formData.cityName = result.cityName  //市
					this.formData.cityCode = result.cityCode  //市
					this.formData.areaName = result.areaName  //区名
					this.formData.areaCode = result.areaCode  //区名
					this.formData.address = result.address  //详细地址
					this.formData.conName = result.conName  //联系人
					this.formData.conTel = result.conTel  //联系电话

					this.verify_on_off = result.conTel  //记录初次手机号

					this.formData.licenseCode = result.licenseCode  //执照编码
					this.formData.loginNo = result.loginNo   //账号
					this.formData.loginPwd = result.loginPwd   //密码

					this.formData.licensePic = result.licensePic  //执照照片
					this.formDataImg.licensePic.push(result.licensePic);

					this.formData.doorPic = result.doorPic  //门头照片
					this.formDataImg.doorPic.push(result.doorPic);
				} else {
					this.add_off = true
					// uni.showToast({
					// 	title: e.message,
					// 	icon: 'none'
					// });
				}
			})
		},

		handleCheck() {
			this.hasRead = !this.hasRead;
		},
	}
}
</script>

<style lang="less">
@import './settled.less';
</style>
